<template>
    <div class="user-analysis page-container">
        <el-row class="user-analysis_row header">
            <span class="text">用户运营</span>
            <!--<i class="el-icon-question"></i>-->
        </el-row>
        <el-row class="user-analysis_row user-analysis_row--filter" type="flex">
            <el-select class="filter-item" v-model="queryParameter.category" placeholder="品类" clearable>
                <el-option
                        v-for="{ value, label } in options.category"
                        :key="value"
                        :label="label"
                        :value="value">
                </el-option>
            </el-select>
            <el-select class="filter-item" v-model="queryParameter.model" placeholder="销售型号" clearable>
                <el-option
                        v-for="{ value, label} in options.model"
                        :key="value"
                        :label="label"
                        :value="value">
                </el-option>
            </el-select>
            <el-select class="filter-item" v-model="queryParameter.province"
                       placeholder="省份"
                       @change="_getCityListByProvince" clearable>
                <el-option
                        v-for="{ value, label } in options.province"
                        :key="value"
                        :label="label"
                        :value="value">
                </el-option>
            </el-select>
            <el-select class="filter-item" v-model="queryParameter.city"
                       placeholder="城市" clearable>
                <el-option
                        v-for="{ value, label } in options.city"
                        :key="value"
                        :label="label"
                        :value="value">
                </el-option>
            </el-select>
        </el-row>
        <el-row class="user-analysis_row user-analysis_row--shipment">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">用户活跃趋势</span>
                </el-row>
                <UserActiveTrend :queryData="queryParameter" class="card-content"/>
            </el-card>
        </el-row>
        <el-row class="user-analysis_row user-analysis_row--intel-sale-ratio">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">用户获取指标</span>
                </el-row>
                <UserAcquireIndicator :queryData="queryParameter" class="card-content" />
            </el-card>
        </el-row>
        <el-row class="user-analysis_row user-analysis_row--intel-sale-ratio">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">用户存留分析</span>
                </el-row>
                <UserPersistenceAnalysis :queryData="queryParameter" class="card-content" />
            </el-card>
        </el-row>
    </div>
</template>

<script>
// import moment from 'moment'
import UserActiveTrend from './user-active-trend'
import UserAcquireIndicator from './user-acquire-indicator'
import UserPersistenceAnalysis from './user-persistence-analysis'
import { commonMixin } from '@/mixins/user-analysis/user-operation'
import { getCategory, getProvinceList, getCityListByProvince } from '@/utils/getSeletorData'

export default {
  name: 'UserOperation',
  components: { UserActiveTrend, UserAcquireIndicator, UserPersistenceAnalysis },
  mixins: [commonMixin],
  data () {
    return {
      options: {
        category: getCategory(),
        model: [],
        province: [],
        city: []
      },
      queryParameter: {
        model: undefined,
        category: undefined,
        province: undefined,
        city: undefined
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this._getDeviceProductModelList()
      this._getProvinceList()
    },
    async _getDeviceProductModelList () {
      const { data: { data = [] } } = await this.$http
        .get(this.getApiUrl('dataanalysis_iot/sale/getDeviceProductModelList', false))
      this.options.model = data.map((item) => {
        return {
          label: item,
          value: item
        }
      })
    },
    async _getProvinceList () {
      this.options.province = await getProvinceList.call(this)
    },
    async _getCityListByProvince () {
      this.options.city = await getCityListByProvince.call(this)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";

    .page-container {
        @include layout-header;

        .user-analysis_row {
            & ~ .user-analysis_row {
                margin-top: $gap-big;
            }

            .box-card {
                & + .box-card {
                    margin-top: 0;
                    margin-left: $gap-default;
                }

                .title {
                    font-weight: bolder;
                    font-size: 145%;
                }
                .card-content {
                    position: relative;
                }
            }
        }

        .user-analysis_row--filter {
            @include filter-row;
        }

        .user-analysis_row--shipment {
            .day {
                flex-basis: 70%;
            }
            .month {
                flex-basis: 30%;
            }
        }
    }
</style>
